// import styles from './index.css';
// function BasicLayout(props) {
//   return (
//     <div className={styles.normal}>
//       <h1 className={styles.title}>Yay! Welcome to umi!</h1>
//       {props.children}
//     </div>
//   );
// }

import {Suspense} from 'react';
import { Layout } from 'antd';

import Loading from '../components/loading'
import Header from '../components/header'
import Sider from '../components/sider'
import Breadcrumb from '../components/breadcrumb'

const {  Content } = Layout;
const BasicLayout = (props)=>{
  return(
    // Layout布局
    <Layout style={{height: "100%"}}>

      {/* 头部 */}
      <Header />

      <Layout>
        {/* 侧边栏 */}
        <Sider />

        <Layout style={{ padding: '0 24px 24px' }}>
        {/* 面包屑 */}
        <Breadcrumb pathname={props.location.pathname} />

          <Content
            style={{
              background: '#fff',
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Suspense fallback={<Loading />} >
              {props.children}
            </Suspense>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

export default BasicLayout;
